<template>
  <div class="child-component">
    <h4>子组件</h4>
    <div class="component-content">
      <p>父组件传来的消息: {{ message }}</p>
      <el-input v-model="replyMessage" placeholder="输入消息回复父组件">
        <template #append>
          <el-button @click="sendToParent">回复</el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  
  props: {
    message: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      replyMessage: ''
    }
  },

  methods: {
    sendToParent() {
      this.replyMessage = this.replyMessage.trim()
      if (!this.replyMessage) return
      this.$emit('reply', this.replyMessage)
    }
  }
}
</script>

<style scoped>
.child-component {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
  margin-top: 15px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
}
</style> 